<template>
  <div class="control-section">
    <div class="control-header">
      <span>微信客服</span>
      <span></span>
    </div>
    <div class="control-body">
      <div class="control-item">
        <uploadImg :uploadImg="params.params.picUrl" @uploadSuccess="uploadSuccess" @deleteImg="deleteImg"></uploadImg>
        <div class="switch-item">
          <span>是否展示</span>
          <a-switch v-model="params.is_show" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from '@/components/DiyNew/uploadImg/index.vue'

export default {
  name: 'widgetWxControl',
  components: {
    uploadImg,
  },
  props: {
    params: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {}
  },
  watch: {},
  computed: {},
  methods: {
    uploadSuccess(e) {
      console.log('上传成功回调', e)
      // this.$set(this.params.params, "picUrl", e.val);
      this.$setWithAction(this.params.params, 'picUrl', e.val)
    },
    deleteImg() {
      // this.$set(this.params.params, "picUrl", "");
      this.$setWithAction(this.params.params, 'picUrl', '')
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.control-section {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    span:first-child {
      font-weight: 600;
      color: #000000;
    }
    span:last-child {
      font-size: 12px;
      color: #8c8c8c;
    }
  }
  .control-body {
    width: 228px;
    margin: 0 auto;
    .control-item {
      width: 100%;
      .control-title {
        padding: 24px 0 14px 0;
        text-align: left;
        font-size: 12px;
        color: #000000;
      }
      .control-content {
        width: 228px;
        height: 40px;
        background: #f6f7f9;
        border-radius: 4px;
        .ant-input {
          height: 100%;
          border: 0 none;
          background: #f6f7f9;
        }
      }
    }
    .switch-item {
      width: 228px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 4px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
    }
  }
}
</style>
